<template>
    <div class="container">
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-header class="header">
                <h1 class="title">
                    水果网络销售平台
                </h1>
                <div class="dropdown">
                    <el-dropdown >
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span class="welcome">欢迎您, {{username}}</span>
                </div>

            </el-header>


            <el-container>

                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>管理功能</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1"  @click="changePath('/main/salesModel')">零售商管理</el-menu-item>
                                <el-menu-item index="1-2" @click="changePath('/main/commodities')">货物管理</el-menu-item>

                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-menu"></i>购销合同</template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="changePath('/main/contract')">购销合同</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-setting"></i>用户设置</template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1">用户设置</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main class="main">
<!--                    <SalesModel/>-->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script>
    import SalesModel from "../components/SalesModel";
    export default {

        name: "Main",
        components:{
            SalesModel
        },
        data(){
            return{
               username:''
            }
        },
        mounted() {
            const username = JSON.parse(localStorage.getItem("userInfo")).username;
            this.username = username
        },
        methods:{
            changePath(path){
                this.$router.push({path:path})
            }
        }
    }
</script>

<style scoped lang="scss">
.container{
    width: 100%;
    height: 100%;
    background: #96b1e8;
    .header{
       background: #262e4a;
        position: relative;
        height: 300px;
        .title{
            color: #fff;
            font-size: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: -30px;
        }
        .dropdown{
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            .welcome{
                color: #ffffff;
            }
        }
    }
    .main{
        /*background: red;*/
    }
}
</style>
